<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      1. 先去让子组件去触发父组件事件
      2. 在父组件的子组件标签上面添加自定义事件, 值就是父组件的事件
      3. 在子组件里面调用this.$emit()方法进行触发
      4. 传值
      5. 可以在this.$emit()里面接受第二个参数，这个参数就是需要传递的值
      6. 父组件的函数里面可以直接接受
     -->
    <div id="app">
      <h3>子传父 - {{ count }}</h3>
      <app-child @getcount="fn"></app-child>
    </div>

    <script src="../Vue.js"></script>
    <script>
      Vue.component("app-child", {
        data() {
          return {
            count: 10,
          };
        },
        template: `
          <div>app-child - {{ count }} - <button @click="handleClick">btn</button></div>
        `,
        mounted() {
          this.$emit("getcount", this.count);
        },
        methods: {
          handleClick() {
            // this.$emit("getcount", {
            //   num: 999,
            //   name: "zhangsan",
            // });
            this.$emit("getcount", this.count);
          },
        },
      });

      new Vue({
        el: "#app",
        data: {
          count: undefined,
        },
        methods: {
          // fn(payload) {
          //   console.log("fn", payload.num, payload.name);
          // },
          fn(count) {
            this.count = count;
          },
        },
      });
    </script>
  </body>
</html>
